<!doctype html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>可乐-Blog 分类</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static_resources/favicon.ico}" />
    <link rel="stylesheet" th:href="@{/static_resources/css/nav.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/static_resources/css/classify.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/static_resources/css/bottomNav.css}" type="text/css">
</head>
<body>
<div class="navHeader">
    <div class="lalala">
        <div class="navLeft">
            <div class="logo">
                <img th:src="@{/static_resources/img/KeLe.png}" alt="">
                <div class="KeLeWorld">
                    <img th:src="@{/static_resources/img/KeLeWorld.png}" alt="">
                </div>
            </div>
            <ul class="navUl">
                <li class="navLi">
                    <a class="A" th:href="@{../tooIndex}">首页</a>
                </li>
                <li class="navLi border-B">
                    <a class="A">分类</a>
                </li>
                <li class="navLi">
                    <a class="A" th:href="@{../manager/findAllUser}">管理系统</a>
                </li>
            </ul>
        </div>
        <div class="navF11">
            <div class="searchContainer">
                <div class="searchInput">全屏</div>
                <div class="glass">
                    <img th:src="@{/static_resources/img/fullScreen.png}" alt="">
                </div>
            </div>
        </div>
        <div class="navMiddle">
            <div class="searchContainer">
                <div class="searchContainer">
                    <a th:href="@{/to/toSearch}" class="searchInput">搜索</a>
                    <div class="glass">
                        <img th:src="@{/static_resources/img/fangdajing.png}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="navRight">
            <div class="workCenter">
                <a class="A" th:href="@{../to/toWrite}">
                    创作中心
                </a>
            </div>
            <div class="vip">
                <a class="A" th:href="@{../to/toVipCenter}">会员中心</a>
            </div>
            <div class="headerPictureContainer">
                <div class="headerPicture headerPictureS">
                    <th:block th:if="${session.User} ne null">
                        <img th:src="@{ ${session.User.src} }" alt="">

                    </th:block>
                </div>
                <div class="message">
                    <h3 class="messageName"></h3><!--后台数据*用户名-->
                    <div class="vipTF">vip</div><!--vip-->
                    <div class="line"></div><!--下划线-->
                    <div class="FanFollowContent">
                        <div>
                            <div class="FanNumber">
                                <th:block th:if="${session.User} ne null">
                                    <b th:text="${session.User.fans}"></b>
                                </th:block>
                            </div>
                            <div>
                                粉丝
                            </div>
                        </div>
                        <div>
                            <div class="FollowNumber">
                                <th:block th:if="${session.User} ne null">
                                    <b th:text="${session.User.follow}"></b>
                                </th:block>
                            </div>
                            <div>
                                关注
                            </div>
                        </div>
                    </div>
                    <div class="line"></div><!--下划线-->
                    <div class="personalCenterC">
                        <div class="personalCenter">
                            <a class="peopleCenter" th:href="@{../to/toPeopleCenter}">个人中心</a>
                        </div>
                        <div class="personalCenterIco">
                            <img th:src="@{/static_resources/img/icon7.png}" alt="">
                        </div>
                    </div>
                    <div class="personalCenterO">
                        <div class="personalCenter">
                            <a class="peopleCenter" th:href="@{../blogs/findBlogsByBlogger}">内容管理</a>
                        </div>
                        <div class="personalCenterIco">
                            <img id="OtherPicture" th:src="@{/static_resources/img/neirongguanli.png}" alt="">
                        </div>
                    </div>
                    <div class="personalCenterO">
                        <div class="personalCenter">
                            <a class="peopleCenter" th:href="@{../to/toMyCollect}">我的收藏</a>
                        </div>
                        <div class="personalCenterIco">
                            <img th:src="@{/static_resources/img/collection.png}" alt="">
                        </div>
                    </div>
                    <div class="personalCenterO">
                        <div class="personalCenter">
                            <a class="peopleCenter">退出登录</a>
                        </div>
                        <div class="personalCenterIco">
                            <img th:src="@{/static_resources/img/tuichu.png}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="w BottomPadding">
    <div class="w differentLabelContainer">
        <div class=" differentLabel">
            <h3>生活</h3>
            <div class="twoSpaceContainerTop">
                <div class="twoSpace" th:each="map:${classifiedMap.get('life')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
<!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}" >
                    <p class="spaceTitle" th:text="${list.title}">
                    </p>
                    <div class="spaceContent" th:text="${#strings.abbreviate(list.content,100)}">

                    </div>
                    <div class="spaceInfo">
                        <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                        <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                        <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                        <span>评论:</span><span th:text="${list.doh}"></span>
                        <span>浏览:</span><span th:text="${list.collection}"></span>
                    </div>
                    </th:block>
                </div>
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>二次元</h3>
            <div class="twoSpaceContainerTop">
                <div class="twoSpace" th:each="map:${classifiedMap.get('two')}"  th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div>
        <!--二次元-->
        <div class=" differentLabel">
            <h3>音乐</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace">-->
<!--                    <p class="spaceTitle">-->
<!--                        标题-->
<!--                    </p>-->
<!--                    <div class="spaceContent">-->
<!--                        此时会发现，必须在停止滚动1秒以后，才会打印出滚动条位置。-->
<!--                        到这里，已经把防抖实现了，现在给出定义：-->
<!--                        对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。-->
<!--                        节流(throttle)-->
<!--                        继续思考，使用上面的防抖方案来处理问题的结果是：-->
<!--                        如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。-->
<!--                        但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？（此处暂且不论哪种方案更合适，既然产品爸爸说话了我们就先考虑怎么实现）-->
<!--                    </div>-->
<!--                    <div class="spaceInfo">-->
<!--                        <sapn class="spaceInfoBlogger">片刻之前</sapn>-->
<!--                        <span>发布时间：</span><span class="spaceInfoTime">2021-6-14</span>-->
<!--                        <span>点赞:</span><span>100</span>-->
<!--                        <span>评论:</span><span>100</span>-->
<!--                        <span>浏览:</span><span>100</span>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('music')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>美食</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('food')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>影视</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('movie')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>运动</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('sport')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>科技</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('science')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>技术</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('technology')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>社交</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('friend')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
        <div class=" differentLabel">
            <h3>其他</h3>
            <div class="twoSpaceContainerTop">
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
                <div class="twoSpace" th:each="map:${classifiedMap.get('other')}" th:href="@{../blogs/findById?(id=${map.id},bid=${map.bid})}" onclick="location.href=this.getAttribute('href');">
                    <!--                    th:each="map:${classifiedMap.get('life')}"-->
                    <th:block th:each="list:${map}">
                        <p class="spaceTitle" th:text="${list.title}">
                        </p>
                        <div class="spaceContent" th:utext="${list.content}">

                        </div>
                        <div class="spaceInfo">
                            <sapn class="spaceInfoBlogger" th:text="${list.blogger}"></sapn>
                            <span>发布时间：</span><span class="spaceInfoTime" th:text="${list.releasetime}"></span>
                            <span>点赞:</span><span th:text="${list.thumbsup}"></span>
                            <span>评论:</span><span th:text="${list.doh}"></span>
                            <span>浏览:</span><span th:text="${list.collection}"></span>
                        </div>
                    </th:block>
                </div>
            </div>
<!--            <div class="twoSpaceContainerBottom">-->
<!--                <div class="twoSpace"></div>-->
<!--                <div class="twoSpace"></div>-->
<!--            </div>-->
        </div><!--二次元-->
    </div>
</div>
<div class="classifyLabelContainer">
    <ul class="w classifyLabel">
        <li class="tenLabel">生活</li>
        <li class="tenLabel">二次元</li>
        <li class="tenLabel">音乐</li>
        <li class="tenLabel">美食</li>
        <li class="tenLabel">影视</li>
        <li class="tenLabel">运动</li>
        <li class="tenLabel">科技</li>
        <li class="tenLabel">技术</li>
        <li class="tenLabel">社交</li>
        <li class="tenLabel">其他</li>
    </ul>
</div>
<div class="returnTop">
    <img th:src="@{/static_resources/img/arrow.png}" alt="">
</div>
<script th:src="@{/static_resources/js/nav.js}" type="text/javascript"></script>
<script th:src="@{/static_resources/js/classify.js}" type="text/javascript"></script>
<script th:src="@{/static_resources/js/otherLogin.js}" type="text/javascript"></script>
</body>
</html>